<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event</title>
</head>
<body>
    <pre id="p1">
        一个dom事件会有两个阶段 捕获 和冒泡
        先捕获 就是由大范围到确定元素 这个阶段 可以拦截事件, 通常是收集事件而不做执行
        后冒泡 定位到最小元素后 就像一个波纹 往外扩散 通常是监听这个阶段，这才是执行的时候， 在递归中我们叫他回溯

        DOM3 Events 定义了如下事件类型。
             用户界面事件（UIEvent）：涉及与 BOM 交互的通用浏览器事件。
             焦点事件（FocusEvent）：在元素获得和失去焦点时触发。
             鼠标事件（MouseEvent）：使用鼠标在页面上执行某些操作时触发。
             滚轮事件（WheelEvent）：使用鼠标滚轮（或类似设备）时触发。
             输入事件（InputEvent）：向文档中输入文本时触发。
             键盘事件（KeyboardEvent）：使用键盘在页面上执行某些操作时触发。
             合成事件（CompositionEvent）：在使用某种 IME（Input Method Editor，输入法编辑器）输入
            字符时触发。
        <h2 id="s1">用户界面事件</h2>
                 DOMActivate：元素被用户通过鼠标或键盘操作激活时触发（比 click 或 keydown 更通用）。
            这个事件在 DOM3 Events 中已经废弃。因为浏览器实现之间存在差异，所以不要使用它。
             load：在 window 上当页面加载完成后触发，在窗套（frameset）上当所有窗格（frame）
            都加载完成后触发，在img元素上当图片加载完成后触发，在object元素上当相应对象加
            载完成后触发。
                  unload：在 window 上当页面完全卸载后触发，在窗套上当所有窗格都卸载完成后触发，在
            object元素上当相应对象卸载完成后触发。
               abort：在object元素上当相应对象加载完成前被用户提前终止下载时触发。
              error：在 window 上当 JavaScript 报错时触发，在 img元素上当无法加载指定图片时触发，
            在 object元素上当无法加载相应对象时触发，在窗套上当一个或多个窗格无法完成加载时
            触发。
                 select：在文本框（input 或 textarea）上当用户选择了一个或多个字符时触发。
                 resize：在 window 或窗格上当窗口或窗格被缩放时触发。
                 scroll：当用户滚动包含滚动条的元素时在元素上触发。body元素包含已加载页面的滚动条。
            大多数 HTML 事件与 window 对象和表单控件有关。
            除了 DOMActivate，这些事件在 DOM2 Events 中都被归为 HTML Events（DOMActivate 在 DOM2
            中仍旧是 UI 事件）。

            <code>
                target.addEventListener(type, listener, options);主要看这个
                target.addEventListener(type, listener, useCapture); 这个看看就行
                
            </code>
    </pre>
</body>
<script>
    let p1 = document.getElementById('p1') ;
    let s1 = document.getElementById('s1') ;

    p1.addEventListener('pointerdown', ()=> {console.log( 'capture p1')}, {capture:true, })
    p1.addEventListener('pointerdown', ()=> {console.log( ' bubule p1')}, {capture:false, })
    s1.addEventListener('pointerdown', ()=> {console.log( 'capture s1')}, {capture:true, })
    s1.addEventListener('pointerdown', ()=> {console.log( ' bubule s1')}, {capture:false, })
</script>
</html>